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COMMUNITY RESOURCES FROM IBM 


Kids Code! Card 3 

Add Linked Web pages to your Node.js website 


1. Go to DevOps Services at https://hub.jazz.net and Log In. 

2. You can either continue with the project you used for Card 2, or start a new project. 

Use My Projects to find your project of my name | myname-NodeJS_Simple_2, then Open the 
application and Edit Code 

Or, to start a new project: Go to rewillen | NodeJS_Simple_2, and Fork like card 1. 

3. Open the views folder, and then Click on indexwithlinks.ejs and copy lines 9-15. 


4. Click on index.ejs and paste the content after line 8. Index.ejs should now look like indexwithlinks.ejs. 


1 |< ! OGCTYPE html> 

2 <html ng-app> 

3 <head> 

4 <title>Ruth 1 s web site</title> 

5 «link rel= 1 stylesheet' href= '/stylesheets/style.css' /> 

6 </head> 

7 <body> 

8 <hl>Ruth's web site</hl> 

9 <!--copy the lines below to your index.ejs file--> 

10 <p>Click on a link to visit a page.</p> 

11 <ul> 

12 <lixa href="sports .html">My favorite sports</a><!/li> 

13 clixa href="aboutme. html ,r >About Me</ax/li> 

14 </ul> 

15 <l--end of section to copy--> 

16 <p>The user count in my nodejs application is: <%= userCount S£x/p> 

17 </body> 

IB C/html> 


5. Use Live Edit Quick Restart to update your application. 



6. Follow the URL link to your application. In your application, test the links to My favorite sports and 
About Me pages. 


Your Name web site 


Click on a link to visit a page. 

* My favorite sports , 
« About Me ^ 



The user count in my nodejs application is: 1 
The user by two count in my nodejs application is: 2 
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7. Back in the DevOps Services tab, Click on public directory. 


▼ public 
► images 
k stylesheets 
[o) aboutme.html 
sports.html 


8. Edit the text in aboutme.html. 

9 <hl>About Me</hl> 

10 <p>Myname is Ruth.</p> 

11 <p>I live in a USA.</p> 

12 <p>I am over 10 years old.</p> 

9. Edit the img line in aboutme.html to reference a picture which will be uploaded in the next steps. 

14 <p><img src="images/mypicture.jpg" alt="My picture" width="240px"/></p> 


10. In the public folder, click on images. 

11. Select File, Import, File or zip archive. 

File 


Edit View Tools 


FORK 


New 

Save 

CtrFS 

Import 

* File or zip archive 

Export 

► HTTP 



12. Navigate and select your image to upload. 

13. Edit sports.html. Insert links to your favorite sports and games 

<liXa href ="http://www.websoduku. com/ ">Web Soduku</aX/li> 


14. Use the Live Edit Quick Restart to update your website. Check that your image displays and your new 
links work. 
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15. Experiment with any HTML features that you want. You can complete the My First Website CoderDojo 
HTML exercises for additional ideas, then move to the NodeJS_Simple_3 project. 














